(function () {
  // 防抖函数 （先等待 后调用 一段时间没有事件触发了 才调用）
  function debounce(callback, delay) {
    var timer = null;
    delay = delay || 300;
    return function () {
      var that = this;
      var arg = arguments;
      clearTimeout(timer);
      timer = setTimeout(function () {
        callback && callback.apply(that, arg);
      }, delay);
    };
  }

  // 节流函数  (先调用  后等待  按照指定的频率响应事件)
  function throttle(callback, delay) {
    var timer = null;
    delay = delay || 1000;

    return function () {
      if (timer) return;
      callback && callback.apply(this, arguments);
      timer = setTimeout(function () {
        timer = null;
      }, delay);
    };
  }

  // 校验注册表单
  function checkRegisterForm() {
    var form = document.querySelector(".register-mid");

    if (!form) return;

    var isValid = false; // 记录 表单是否通过验证
    var input = form.querySelector('input[name="username"]');
    var info = form.querySelector(".form-info");

    console.log(input);
    form.addEventListener("submit", function (e) {
      e.preventDefault(); // 禁止默认的提交行为

      if (isValid) form.submit();
    });

    input.addEventListener(
      "input",
      throttle(function (e) {
        console.log("input");
        var value = e.target.value.trim();
        // 检测用户名是否为空
        if (!value) {
          isValid = false;
          info.innerHTML = "用户名不能为空";
          info.classList.add("text-danger"); // text-danger 提示错误的样式
          info.classList.remove("text-success"); // text-success 提示成功的样式
          return;
        }

        info.innerHTML = "";

        // 用户输入的用户名 ajax请求 发送给服务端
        ajax({
          url: "/api/check-username",
          data: {
            username: value,
          },
          success: function (data) {
            // 在success回调函数中拿到相应的结果
            console.log(data);
            if (data.status === "fail") {
              // 用户名已存在的情况
              isValid = false;
              info.innerHTML = data.message;
              info.classList.add("text-danger"); // text-danger 提示错误的样式
              info.classList.remove("text-success");
              input.classList.add("input-error");
            } else if (data.status === "success") {
              // 用户名未存在的情况
              isValid = true;
              info.innerHTML = data.message;
              info.classList.remove("text-danger"); // text-danger 提示错误的样式
              info.classList.add("text-success");
              input.classList.remove("input-error");
            }
          },
        });
      })
    );
  }

  checkRegisterForm();

  // 实现首页的分页效果
  function paginator() {
    var $wrap = $(".latest-article-wrap");

    $(".pager[async]").on("click", function (e) {
      e.preventDefault(); // 阻止默认跳转行为
      if (e.target.tagName !== "A") return;

      // 截取  limit=5&page=1
      var data = e.target.href.split("?")[1];

      // 发送ajax请求
      $.ajax({
        url: "/api/post",
        data: data,
        beforeSend: function () {
          return !e.target.classList.contains("active"); // 如果有active类名就返回false  不发出请求
        },
        success: function (data) {
          var template = `<% posts.forEach(post=>{ %>
            <a href="/post/ArticleDetails/<%= post._id?.toString()%>" class="latest-article__item">
              <div class="container-fluid">
                  <div class="row">
                      <div class="col-sm-4">
                          <div class="latest-article__img" style="background-image: url(<%= post.img || '/img/default.png'%>)">
                          </div>
                      </div>
                      <div class="col-sm-8">
                          <div class="latest-article__content">
                              <div class="latest-article__title">
                                  <%= post.title %>
                              </div>
                              <div class="latest-article__foot">
                                  <span class="tag">
                                      <%= post.created %>
                                  </span>
                                  <span>浏览(<%= post.pv %>)</span>
                                  <span>留言(<%= post.commentCount %>)</span>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
            </a>
            <%})%>`;

          // 拿到数据之后根据模板渲染出html结构
          var html = ejs.render(template, { posts: data.posts });

          // 用新的结构替换掉原有的html结构
          $wrap.html(html);

          var pagin = `<% if(page !==0){%>
            <li>
              <a
                href="?limit=5&page=<%=page-1%>"
                class="glyphicon glyphicon-chevron-left control"
              ></a>
            </li>
            <%}%> <%for(var i=0; i <count / limit; i++){%>
            <li>
              <a href="?limit=5&page=<%=i%>" class="<%= i===page?'active':''%>">
                <%= i+1 %>
              </a>
            </li>
            <%}%> <%if(page <(count / limit - 1)){%>
            <li>
              <a
                href="?limit=5&page=<%=page+1%>"
                class="glyphicon glyphicon-chevron-right control"
              ></a>
            </li>
            <%}%> `;

          $(".pager").html(ejs.render(pagin, { ...data }));
        },
      });
    });
  }

  paginator();
})();
